<template>
  <body>
    <div class="mian_container">
      <img src="../../assets/背景图.png" width="100%" height="100%" />
      <!-- 头部区域 -->
      <div class="header_box">
        <div>
          <img src="../../assets/城市学院logo.png" alt="" />
          <img src="../../assets/实验室logo.png" alt="" />
        </div>

        <el-row :gutter="20">
          <el-col :span="25"
            ><el-input>
              <el-button
                slot="append"
                icon="el-icon-search"
                type="primary"
              ></el-button> </el-input
          ></el-col>
        </el-row>
      </div>
      <!-- 导航栏区域 -->
      <div class="shortcut_box">
        <div class="short2_box">
          <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#0e4c92"
          text-color="#fff"
          active-text-color="#fff"
          :collapse-transition="false"
        >
          <el-menu-item index="/hosthome">首页</el-menu-item>
          <el-submenu index="1">
            <template slot="title">中心概况</template>
            <el-menu-item index="/centerprofile">中心简介</el-menu-item>
            <el-menu-item index="/laboratoryintroduction"
              >实验室介绍</el-menu-item
            >
            <el-menu-item index="/teachers">师资队伍</el-menu-item>
          </el-submenu>
          <el-menu-item index="/notice">新闻公告</el-menu-item>
          <el-submenu index="7">
            <template slot="title">教学资源</template>
            <el-menu-item index="4-1">课件资源</el-menu-item>
            <el-menu-item index="4-2">软件资源</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">成果展示</template>
            <el-menu-item index="4-1">教学改革</el-menu-item>
            <el-menu-item index="4-2">教学成果</el-menu-item>
            <el-menu-item index="4-3">学生成果</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">实验平台</template>
            <el-menu-item index="/pat">PAT平台连接</el-menu-item>
            <el-menu-item index="/sql">SQL在线判题系统连接</el-menu-item>
            <el-menu-item index="/aoa">AOA练习系统连接</el-menu-item>
          </el-submenu>

          <el-menu-item index="4">综合服务</el-menu-item>
          <el-submenu index="10">
            <template slot="title">教学综合信息系统</template>
            <el-menu-item index="4-1">实验项目卡</el-menu-item>
            <el-menu-item index="4-2">教学情况运转表</el-menu-item>
          </el-submenu>
        </el-menu>
        </div>
      </div>
      <!-- 内容主体区域 -->
      <div class="function_box">
        <div class="function_container">
          <!-- 登录模块 -->
          <div class="login_box">
            <span style="font-family:'宋体">登录</span>
            <!-- 登录表单区域 -->
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginFormRules"
              label-width="0px"
              class="login_Form"
            >
              <!-- 用户名 -->
              <el-form-item prop="account">
                <el-input v-model="loginForm.account"></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                ></el-input>
              </el-form-item>
              <!-- 按钮区域 -->
              <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 轮播图模块 -->
          <div class="png_box">
            <img src="../../assets/zucc_01.jpg" width="100%" height="100%" />
          </div>
          <!-- 新闻公告模块 -->
          <div class="news_box" slot="header">
            <span style="font-family:'宋体">新闻公告</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >

            <div class="img_box">
              <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in carouselIMG" :key="item.src">
                  <img src="../../assets/zucc_01.jpg" />
                  <img src="../../assets/logo.png" />
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="img2_box">
              <li><a>为充分展示校园风采等，经学校研究决定开展2022-01-22</a></li>
              <li><a>为充分展示校园风采等，经学校研究决定开展</a></li>
              <li><a>为充分展示校园风采等，经学校研究决定开展</a></li>
              <li><a>为充分展示校园风采等，经学校研究决定开展</a></li>
              <li><a>为充分展示校园风采等，经学校研究决定开展</a></li>
              <li><a>为充分展示校园风采等，经学校研究决定开展</a></li>
              <li><a>为充分展示校园风采等，经学校研究决定开展</a></li>
            </div>
          </div>
          <!-- 实验室介绍模块 -->
          <div class="lab_box">
            <span style="font-family:'宋体">实验室介绍</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >
          </div>
          <!-- 教学资源模块 -->
          <div class="teachingrecource_box">
            <span style="font-family:'宋体">教学资源</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >
          </div>
          <!-- 教学成果模块 -->
          <div class="teachingachievements_box">
            <span style="font-family:'宋体">教学成果</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >
          </div>
          <!-- 教育综合系统模块 -->
          <div class="EducationalAdministrationIntegratedSystem_box">
            <span style="font-family:'宋体">教务综合系统</span>
          </div>
          <!-- 实验室在线申请模块 -->
          <div class="LaboratoryOnlineApplication_box">
            <span style="font-family:'宋体">实验室在线申请</span>
          </div>
          <!-- 成果展示模块 -->
          <div class="AchievementDisplay_box">
            <span style="font-family:'宋体">成果展示</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >
            <el-carousel trigger="click" height="150px">
              <el-carousel-item v-for="item in carouselIMG" :key="item.src">
                <img src="../../assets/zucc_01.jpg" />
                <img src="../../assets/logo.png" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 热点新闻模块 -->
          <div class="HotNews_box">
            <span style="font-family:'宋体">热点新闻</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >
          </div>
          <!-- 实验室平台模块 -->
          <div class="LaboratoryPlatform_box">
            <span style="font-family:'宋体">实验室平台</span>
            <!-- <img src="../assets/网络U盘.png" alt="" />
            <img src="../assets/PAT测评系统.png" alt="" />
            <img src="../assets/教学信息综合管理.png" alt="" />
            <img src="../assets/上机查询系统.png" alt="" />
            <img src="../assets/资源申请.png" alt="" />
            <img src="../assets/设备管理.png" alt="" />
            <img src="../assets/AOA评测系统.png" alt="" />
            <img src="../assets/SQL判题系统.png" alt="" />
            <img src="../assets/格式检查系统.png" alt="" /> -->
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
      carouselIMG: [
        require("../../assets/zucc_01.jpg"),
        require("../../assets/logo.png"),
      ],
      //这是登录表单的数据绑定对象
      loginForm: {
        account: "31801100",
        password: "123456",
      },
      loginFormRules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 50,
            message: "长度在 6 到 50 个字符hhhhhhh",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        const { data: res } = await this.$http.post("/v1/api/users/login", {
          account: this.loginForm.account,
          password: md5(this.loginForm.password),
        });
        if (res.msg != "success") return this.$message.error("登录失败");
        // if(res.status != 200) return console.log('登录失败');
        // console.log('登录成功');
        this.$message.success("登录成功");
        // console.log(res);
        window.sessionStorage.setItem("token", res.data.id);
        this.$router.push({
          name: "Home",
          params: {
            // 后期修改为roleType
            roleType: res.data.roleType,
          },
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
//less 支持less语法格式
//scoped当前组件内生效，去掉全局生效
.mian_container {
  // background-color: #e8f8fa;
  background-color: rgb(230, 180, 180);
  height: 2000px;
}
// 头部
.header_box {
  width: 1020px;
  height: 60px;
  // background-color: rgb(158, 19, 19);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 25px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 35px;
      letter-spacing: 5px;
    }
  }
}
//导航栏
.shortcut_box {
  width: 100%;
  height: 60px;
  background-color: #0e4c92;
  //   border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 123px;
  transform: translate(-50%, -50%);
}
.short2_box{
  width: 1020px;
  height: 60px;
  // background-color: #d3a033;
  //   border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
}

// 主体功能
.function_box {
  width: 1020px;
  // height: 1750px;
  height: 1700px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 1028px;
  transform: translate(-50%, -50%);
}
//主体区域背景布局颜色
.function_container {
  // background-color: #c0e7f3;
  // background-color: rgb(255, 255, 255);
  height: 100%;
}
// 轮播图模块
.png_box {
  width: 100%;
  height: 380px;
  //预留色
  background-color: #38ce77;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 165px;
  transform: translate(-50%, -50%);
}

// 登录模块
.login_box {
  width: 250px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 500px;
  transform: translate(-50%, -50%);
}
.login_box span {
  display: flex;
  font-size: 20px;
  padding-left: 10px;
  padding-top: 15px;
}
.login_Form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

// 新闻公告模块
.news_box {
  width: 750px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 500px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
.img_box {
  width: 250px;
  height: 150px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 160px;
  transform: translate(-50%, -50%);
}
.img2_box {
  width: 460px;
  height: 180px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 520px;
  top: 175px;
  transform: translate(-50%, -50%);
}
// 实验室介绍模块
.lab_box {
  width: 250px;
  height: 440px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 865px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
// 教学资源模块
.teachingrecource_box {
  width: 370px;
  height: 490px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 455px;
  top: 890px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
//教学成果模块
.teachingachievements_box {
  width: 370px;
  height: 490px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 835px;
  top: 890px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
//教务综合系统模块
.EducationalAdministrationIntegratedSystem_box {
  width: 250px;
  height: 40px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 1115px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 5px;
    padding-left: 50px;
    font-size: 20px;
  }
}
//实验室在线申请模块
.LaboratoryOnlineApplication_box {
  width: 250px;
  height: 40px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 1165px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 5px;
    padding-left: 50px;
    font-size: 20px;
  }
}
//成果展示模块
.AchievementDisplay_box {
  width: 750px;
  height: 190px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 1240px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
//热点新闻模块
.HotNews_box {
  width: 250px;
  height: 420px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 1405px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
//实验室平台模块
.LaboratoryPlatform_box {
  width: 750px;
  height: 270px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 1480px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
  > img {
    width: 70px;
    height: 70px;
  }
}
</style>
